<template>
  <page-header-wrapper>
    <global-search more @search="handleSearch" @reset="handleReset" :list="searchList"> </global-search>
    <a-card :bordered="false">
      <s-table
        ref="table"
        size="default"
        rowKey="ID"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: true }"
        :pagination="{ showTotal: (total) => `共 ${total} 条` }"
      >
        <div slot="tabAction">
          <y-button icon="plus" type="primary" @click="handleAction({}, 'visibleForm')">新建档案</y-button>
        </div>
        <span slot="CreateDate" slot-scope="text">{{ text | moment('YYYY-MM-DD') }}</span>
        <span slot="LastAlterDate" slot-scope="text">{{ text | moment('YYYY-MM-DD') }}</span>
        <div slot="action" slot-scope="text, record">
          <y-button type="link" @click="handleAction(record, 'visibleImgList')">查看</y-button>
          <y-button type="link" class="text-warning" @click="handleAction(record, 'visibleForm')">修改</y-button>
          <y-button type="link" class="text-secondary" @click="handleAction(record, 'visiblePrint')">打印</y-button>
        </div>
      </s-table>
    </a-card>
    <fileForm :visible.sync="visibleForm" :data.sync="dataItem" @success="tableRefresh" />
    <imageList :visible.sync="visibleImgList" :data.sync="dataItem" />
    <print :visible.sync="visiblePrint" :data.sync="dataItem" />
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getArchivesList, getArDropList } from '@/api/fileManagement'
import fileForm from './components/form.vue'
import imageList from './components/imageList'
import print from './components/print'

export default {
  name: 'cityComplexInquireList',
  components: {
    STable,
    Ellipsis,
    fileForm,
    imageList,
    print,
  },
  data() {
    return {
      queryParam: {
        UserID: this.$store.getters.userid,
        strContent: {},
      },
      visibleForm: false,
      visibleImgList: false,
      visiblePrint: false,
      dataItem: {},
      searchList: [
        {
          type: 'input',
          label: '档案名称',
          fields: 'Name',
          props: {
            placeholder: '请输入档案名称',
          },
        },
        {
          type: 'input',
          label: '档案索引',
          fields: 'SY',
          props: {
            placeholder: '请输入档案索引',
          },
        },
        // {
        //   type: 'input',
        //   label: '姓名',
        //   fields: 'AKey',
        //   props: {
        //     placeholder: '请输入姓名'
        //   }
        // },
        {
          type: 'year',
          label: '档案年份',
          fields: 'ArCreateYear',
        },
        {
          type: 'range',
          label: '时间范围',
          fields: 'ArCreateDate',
          props: {
            valueFormat: 'YYYY=MM-DD',
          },
        },
        {
          type: 'select',
          label: '存放位置',
          extra: '楼',
          fields: 'DsID',
          props: {
            placeholder: '请选择存放位置',
            options: [],
            changeOnSelect: true,
          },
          methods: {
            change: (e) => this.selectChange(e, 1),
          },
        },
      ],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          customRender: (text, record, index) => index + 1,
        },
        {
          title: '档案编号',
          align: 'center',
          dataIndex: 'IDNO',
        },
        {
          title: '建档名称',
          align: 'center',
          dataIndex: 'Name',
        },
        {
          title: '建档日期',
          align: 'center',
          dataIndex: 'CreateDate',
          scopedSlots: { customRender: 'CreateDate' },
        },
        {
          title: '修改日期',
          align: 'center',
          dataIndex: 'LastAlterDate',
          scopedSlots: { customRender: 'LastAlterDate' },
        },
        {
          title: '档案地址',
          align: 'center',
          dataIndex: 'ArcAddress',
          customRender: (text) => (text ? <ellipsis length={24}>{text}</ellipsis> : '暂无数据'),
        },
        {
          title: '操作',
          align: 'center',
          width: '80px',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getArchivesList(requestParameters).then((res) => res)
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getArDropList({
        lid: '',
      }).then((res) => {
        this.searchList[4].props.options = res.map((e) => ({
          value: e.ID,
          label: e.NAME,
        }))
      })
    },
    selectChange(lid, level) {
      const length = this.searchList.length
      this.searchList.splice(4 + level, length)
      if (this.$isEmpty(lid) || level > 5) return
      const extraArr = ['楼', '层', '室', '柜', '柜层', '盒']
      getArDropList({
        lid: lid,
      }).then((res) => {
        if (!this.$isEmpty(res)) {
          const options = res.map((e) => ({
            value: e.ID,
            label: e.NAME,
          }))
          this.searchList.push({
            type: 'select',
            label: '存放位置',
            extra: extraArr[level],
            fields: 'DsID' + level,
            props: {
              placeholder: '请选择存放位置',
              options,
              changeOnSelect: true,
            },
            methods: {
              change: (e) => this.selectChange(e, level + 1),
            },
          })
        }
      })
    },
    handleSearch(values) {
      const { ArCreateYear } = values
      if (ArCreateYear) {
        values.sArCreateYear = ArCreateYear[0]
        values.sArCreateYear = ArCreateYear[1]
        delete values.ArCreateYear
      }
      this.queryParam.strContent = values
      this.tableRefresh(true)
    },
    handleReset() {
      this.queryParam.strContent = {}
      this.tableRefresh(true)
    },
    tableRefresh(refresh = false) {
      this.$refs.table.refresh(refresh)
    },
    handleAction(record, visibleKey) {
      this.dataItem = record
      this[visibleKey] = true
    },
  },
}
</script>
<style lang="less" scoped>
.table-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/deep/ .ant-table td {
  white-space: nowrap;
}
</style>
